<template>
    <div class='container'>
        <t-tabs default-value="0"
            style="padding: 20px; max-width: 1400px; margin: 0 auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
            <!-- Tab 1: 集合管理 -->
            <t-tab-panel value="0" label="📁 集合管理">
                <Collection />
            </t-tab-panel>
            <!-- Tab 2: 数据管理 -->
            <t-tab-panel value="1" label="📊 数据管理">

                <Data />
            </t-tab-panel>
            <!-- Tab 3: 键值对管理 -->
            <t-tab-panel value="2" label="🔑 键值对管理">

                <KeyValue />
            </t-tab-panel>
        </t-tabs>
    </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import Collection from './IndexedDBUtils/Collection.vue';
import Data from './IndexedDBUtils/Data.vue';
import KeyValue from './IndexedDBUtils/KeyValue.vue';
</script>
<style lang='scss' scoped>
.container {
    background-color: #dbd6d6;
    border-radius: 5px;
}
</style>